<template>
  <div style="margin-top:15px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <!--<el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="所属机构" prop="partyGroupCode" style="margin-right:15px">
              <el-select v-model="form.partyGroupCode" placeholder="请选择机构" clearable style="width: 100%">
                <el-option
                  v-for="item in partyGroup"
                  :key="item.code"
                  :label="item.groupName"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>-->

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="客户名称" prop="shipmentCode" style="margin-right:15px">
              <shipmentSelect ref="shipmentSelect" @setCustomerCode="setCustomerCode"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="计费类型" prop="chargingTypeList" style="margin-right:15px">
              <costTypeSelect ref="costType" @queryCostType="selectCostType" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="单价" prop="price" style="margin-right:15px">
              <el-input v-model="form.price" placeholder="请输入单价" />
            </el-form-item>
          </div>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="计费方式" prop="chargingMode" style="margin-right:15px">
              <el-select v-model="form.chargingMode" placeholder="请选择">
                <el-option value="1" label="吨" />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!--<el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="有效期" prop="validityDate" min-width="350"  style="margin-right:15px">
              <el-date-picker
                v-model="form.validityDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                style="width:100%"
            range-separator="至"

                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>-->
    </el-form>
    <vxe-modal v-model="modelAddFlag" title="新增明细" width="600" height="800" resize>
      <compItmeAdd ref="addPrice" @fatherAddMethod="fatherAddItem" @fatherCancelMethod="fatherItemCancel" />
    </vxe-modal>

    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button @click="addPrice" >输入单价</el-button>
      <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import request from '@/utils/request'
import shipmentSelect from '@/views/components/shipmentSelect.vue'
import costTypeSelect from './costTypeList.vue'
import compItmeAdd from './addPrice.vue'

Vue.use(VXETable)
export default {
  name: 'ChargingTypeAdd',
  components: {
    costTypeSelect,
    shipmentSelect,
    compItmeAdd
  },
  data() {
    return {
      modelAddFlag:false,
      isDisable:false,
      // validityDate: '',
      loading: false,
      cascadeData: [],
      emptyForm: {},
      form: {
        code: '',
        chargingTypeList:[],
        shipmentCode: '',
        shipmentName:'',
        partyGroupCode:'',
        chargingType: '',
        sysType: '',
        priceList: [],
        chargingMode: ''/*,
        startDate: '',
        validityDate: '',
        endDate: ''*/
      },
      partyGroup:[],

      rules: {
        partyGroupCode: [
          { required: true, message: '请选择所属机构', trigger: 'blur' }
        ],

        shipmentCode: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        chargingTypeList: [
          { required: true, message: '请选择计费类型', trigger: 'blur' }
        ],
        sysType: [
          { required: true, message: '请输入系统类型', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入单价', trigger: 'blur' }

        ],
        chargingMode: [
          { required: true, message: '请选择计费方式', trigger: 'blur' }
        ]/*,
        validityDate: [
          { required: true, message: '请输入有效期', trigger: 'blur' }
        ]*/
      }
    }
  },
  created() {
    // 保存空表单对象
    this.emptyForm = JSON.parse(JSON.stringify(this.form))
  },
  methods: {
    // 增加单价的父方法
    fatherAddItem(item) {
      this.form.priceList = []
      this.form.priceList = item
      this.modelAddFlag = false
      // this.insertEvent()
    },
    // 公共取消
    fatherItemCancel(modelFlag) {
      switch (modelFlag) {
        case 'add':
          this.modelAddFlag = false
          break
        default:
      }
    },

    // 重置
    reset(){
      this.$refs['form'].resetFields()
      this.$refs.shipmentSelect.setSelectValue('')
      this.$refs.costType.setSelectValue('')
    },

    // 选择客户
    setCustomerCode(value) {
      this.form.shipmentCode = value;
      this.tableData = [];
      this.form.shipmentName = value.name
    },
    // 选择计费类型
    selectCostType(value) {
      this.form.priceList = []
      this.form.chargingTypeList = value

      // this.form.chargingType = value[1]
      // this.form.sysType = value[0]
    },
    addPrice(){
      this.form.priceList = []
      if(this.form.chargingTypeList.length){
        this.$refs.addPrice.getInfo(this.form.chargingTypeList)
        this.modelAddFlag = true
      }else{
        this.$message.error('请选择计费类型')
      }

    },
    // 翻译类型
    handleChange(value) {
    },

    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form.priceList)
          if(this.form.priceList.length != 0){
            this.isDisable = true
/*
          this.form.startDate = this.form.validityDate[0]
          this.form.endDate = this.form.validityDate[1]*/
            const data = this.form
            request({ url: '/arpa-basic-api/chargingType', method: 'post', data }).then(response => {
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherAddMethod')
              this.isDisable = false
              this.$refs['form'].resetFields()
              this.$refs.shipmentSelect.setSelectValue('')
              this.$refs.costType.setSelectValue('')
              }).catch(() => this.isDisable = false)
            }else{
              this.$message.error('请输入单价')
              this.isDisable = false
            }
          
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    }
  }
}
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin:15px 0 15px 0;
        width: 300px;
        float: right;
    }
</style>
